<!-- subpkg_medicine/order_detail/index.vue -->
<script lang="ts" setup>
  import { useMedic } from '@/hooks'
  import { ref } from 'vue'
  const props = defineProps<{
    id: string
  }>()

  const { orderDetail } = useMedic(props.id)

  //status 药品订单10待支付11待发货12待收货13已完成14已取消
  const statusList = [
    { status: 10, text: '待支付' },
    { status: 11, text: '待发货' },
    { status: 12, text: '待收货' },
    { status: 13, text: '已完成' },
    { status: 14, text: '已取消' },
  ]

  console.log('订单详情', orderDetail)

  // 倒计时 每秒更新一次
  const countdown = ref(orderDetail.value.countdown)
  const timer = setInterval(() => {
    countdown.value--
  }, 1000)
</script>

<template>
  <scroll-page background-color="#f6f6f6">
    <view class="medicine-page">
      <view class="page-header">
        <view class="order-status">
          <text class="label">药品订单 {{ orderDetail?.actualPayment }}元</text>
          <text class="status">{{
            statusList.find((item) => item.status === orderDetail?.status)?.text
          }}</text>
        </view>
        <view class="order-shippment">
          <template v-if="orderDetail?.status == 11">
            <navigator
              hover-class="none"
              :url="`/subpkg_medicine/timeline/timeline?id=${orderDetail?.id}&express=${orderDetail?.addressInfo.addressDetail}`"
            >
              <view class="region">
                <text class="iconfont icon-location"></text>
                {{ orderDetail?.addressInfo.province }} {{ orderDetail?.addressInfo.city }}
              </view>
              <view class="detail">{{ orderDetail?.addressInfo.addressDetail }}</view>
              <view class="receiver"
                >{{ orderDetail?.addressInfo.receiver }} {{ orderDetail?.addressInfo.mobile }}</view
              >
            </navigator>
          </template>
          <template v-if="orderDetail?.status == 12">
            <navigator
              hover-class="none"
              :url="`/subpkg_medicine/timeline/timeline?id=${orderDetail?.id}&express=${orderDetail?.addressInfo.addressDetail}`"
            >
              <view class="marker">{{ orderDetail?.expressInfo.content }}</view>
              <view class="datetime">{{ orderDetail?.expressInfo.time }}</view>
              <view class="arrow">
                <uni-icons size="18" color="#C3C3C5" type="forward" />
              </view>
            </navigator>
          </template>
        </view>
      </view>

      <view class="order-shop">
        优医药房
        <text class="alt">优医质保 假一赔十</text>
      </view>
      <!-- 药品列表 -->
      <view class="medicine-list">
        <view class="medicine-list-item" v-for="item in orderDetail?.medicines" :key="item.id">
          <image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
          <view class="medicine-info">
            <text class="name">{{ item.name }}</text>
            <text class="unit symbol">{{ item.specs }}</text>
            <text class="price">¥{{ item.amount }}</text>
          </view>
          <view class="quantity">x{{ item.quantity }}</view>
          <view class="guide">{{ item.usageDosag }}</view>
        </view>
      </view>

      <!-- 订单信息 -->
      <view class="order-info">
        <uni-list :border="false">
          <uni-list-item title="药品金额" :right-text="`¥${orderDetail?.actualPayment}`" />
          <uni-list-item title="运费" :right-text="`¥${orderDetail?.expressFee}`" />
          <uni-list-item
            title="优惠券"
            show-arrow
            :right-text="`¥${orderDetail?.couponDeduction}`"
          />
          <uni-list-item title="实付款" :right-text="`¥${orderDetail?.actualPayment}`" />
          <uni-list-item title="订单编号" :right-text="orderDetail?.orderNo" />
          <uni-list-item title="创建时间" :right-text="orderDetail?.createTime" />
          <uni-list-item
            title="支付方式"
            :right-text="orderDetail?.paymentMethod === 0 ? '微信支付' : '支付宝'"
          />
        </uni-list>
      </view>

      <view class="notice-bar" v-if="orderDetail.status === 10">
        <uni-notice-bar :text="`请在 ${countdown} 内完成支付，超时订单将取消`" />
      </view>

      <!-- 底部 -->
      <view class="toolbar">
        <template v-if="false">
          <view class="total-amount"> 需付款: <text class="number">¥39.00</text> </view>
          <view class="buttons">
            <button class="uni-button minor">取消问诊</button>
            <button class="uni-button">立即支付</button>
          </view>
        </template>
        <template v-else>
          <view class="buttons">
            <view class="delete-botton">
              <uni-icons size="24" color="#848484" type="trash" />
              <text>删除订单</text>
            </view>
            <button class="uni-button">再次购买</button>
          </view>
        </template>
      </view>
    </view>
  </scroll-page>
</template>

<style lang="scss">
  @import './order_detail.scss';
</style>
